<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>3d立方体相册（纯css）-jq22.com</title>
<script src="https://libs.baidu.com/jquery/1.11.3/jquery.min.js"></script>
<style>
* {
	margin:0;
	padding:0;
}
body {
	overflow: hidden;
}
#canvas {
	position: absolute;
	display:block;
	background-color:#040c11;
}
@keyframes xuanz {
	0% {
	transform:rotateY(0deg) rotatex(15deg);
}
100% {
	transform:rotateY(360deg) rotatex(15deg);
}
}
.waibu {
	position: relative;
	perspective:800px;
	z-index: 10;
	overflow: hidden;
}
.neibu {
	transform-style:preserve-3d;
	position:relative;
	width:200px;
	height:200px;
	margin:400px auto;
	animation:xuanz 10s infinite linear;
}
.neibu div {
	width:200px;
	height:200px;
	position:absolute;
	left:0;
	top:0;
}
.neibu div:nth-child(1) {
	transform:translatez(-100px);
	background:url(https://gitee.com/Mr_ck/album/raw/master/e0e99cb58cbce261e5444f4c0426abe.jpg) 0 -50PX /cover;
}
.neibu div:nth-child(2) {
	transform:rotateY(90deg) translatez(-100px);
	background:url(https://gitee.com/Mr_ck/album/raw/master/e0e99cb58cbce261e5444f4c0426abe.jpg) 0 -50PX /cover;
}
.neibu div:nth-child(3) {
	transform:rotateY(90deg) translatez(100px);
	background:url(https://gitee.com/Mr_ck/album/raw/master/e0e99cb58cbce261e5444f4c0426abe.jpg) 0 -50PX /cover;
}
.neibu div:nth-child(4) {
	transform:rotatex(-90deg) translatez(100px);
	background:url(https://gitee.com/Mr_ck/album/raw/master/e0e99cb58cbce261e5444f4c0426abe.jpg) 0 -50PX /cover;
}
.neibu div:nth-child(5) {
	transform:rotatex(-90deg) translatez(-100px);
	background:url(https://gitee.com/Mr_ck/album/raw/master/e0e99cb58cbce261e5444f4c0426abe.jpg) 0 -50PX /cover;
}
.neibu div:nth-child(6) {
	transform:translatez(100px);
	background:url(https://gitee.com/Mr_ck/album/raw/master/e0e99cb58cbce261e5444f4c0426abe.jpg) 0 -10PX /cover;
}
.neibu div:nth-child(7),div:nth-child(8),div:nth-child(9),div:nth-child(10),div:nth-child(11),div:nth-child(12) {
	width:300px;
	height:300px;
	position:absolute;
	left:50%;
	top:50%;
	margin-left:-150px;
	margin-top:-150px;
	opacity:0.3;
	transition:transform 1s;
}
.neibu div:nth-child(7) {
	transform:translatez(-150px);
	background:url(https://gitee.com/Mr_ck/album/raw/master/e0e99cb58cbce261e5444f4c0426abe.jpg) 0 -50PX /cover;
}
.neibu div:nth-child(8) {
	transform:rotateY(90deg) translatez(-150px);
	background:url(https://gitee.com/Mr_ck/album/raw/master/e0e99cb58cbce261e5444f4c0426abe.jpg) 0 -50PX /cover;
}
.neibu div:nth-child(9) {
	transform:rotateY(90deg) translatez(150px);
	background:url(https://gitee.com/Mr_ck/album/raw/master/e0e99cb58cbce261e5444f4c0426abe.jpg) 0 -50PX /cover;
}
.neibu div:nth-child(10) {
	transform:rotatex(-90deg) translatez(150px);
	background:url(https://gitee.com/Mr_ck/album/raw/master/e0e99cb58cbce261e5444f4c0426abe.jpg) 0 -50PX /cover;
}
.neibu div:nth-child(11) {
	transform:rotatex(-90deg) translatez(-150px);
	background:url(https://gitee.com/Mr_ck/album/raw/master/e0e99cb58cbce261e5444f4c0426abe.jpg) 0 -50PX /cover;
}
.neibu div:nth-child(12) {
	transform:translatez(150px);
	background:url(https://gitee.com/Mr_ck/album/raw/master/e0e99cb58cbce261e5444f4c0426abe.jpg) 0 -10PX /cover;
}
.waibu:hover div:nth-child(7) {
	transform:translatez(-300px) scale(1.2);
	opacity:0.8;
}
.waibu:hover div:nth-child(8) {
	transform:rotateY(90deg) translatez(-300px) scale(1.2);
	opacity:0.8;
}
.waibu:hover div:nth-child(9) {
	transform:rotateY(90deg) translatez(300px) scale(1.2);
	opacity:0.8;
}
.waibu:hover div:nth-child(10) {
	transform:rotatex(-90deg) translatez(300px) scale(1.2);
	opacity:0.8;
}
.waibu:hover div:nth-child(11) {
	transform:rotatex(-90deg) translatez(-300px) scale(1.2);
	opacity:0.8;
}
.waibu:hover div:nth-child(12) {
	transform:translatez(300px) scale(1.2);
	opacity:0.8;
}
</style>
</head>
<body>
<div style="width: 100vw; height: 100vh; position: absolute;">
	<canvas id="canvas"></canvas>
</div>
<div class="waibu">
    <div class="neibu">
        <div></div>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
        <div></div>

        <div></div>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
    </div>
</div>

<script>
	(function(window) {
			if (window) {
					window.onload = function() {
							//获取canvas
							var canvas = document.getElementById('canvas');
							//获取画布
							var content = canvas.getContext('2d');
	
							var cw = innerWidth,
									ch = innerHeight;
							var dotsArr = [];
							canvas.width = cw;
							canvas.height = ch;
	
							(function fn() {
									window.onresize = function() {
											cw = innerWidth;
											ch = innerHeight;
											canvas.width = cw;
											canvas.height = ch;
									} //接收一个指向自己的函数，在事件触发的时候执行
							})();
	
							function Dot() {};
	
							Dot.prototype = {
									init: function() {
											this.w = rand(0, cw);
											this.h = rand(0, ch);
											this.r = rand(0.2, 1.5);
											this.speedX = rand(-1, 1);
											this.speedY = rand(-1, 1);
											this.color = 'white'
									},
									draw: function() {
											content.fillStyle = this.color;
											content.beginPath();
											content.arc(this.w, this.h, this.r, 0, Math.PI * 2);
											content.fill();
									},
									move: function() {
											this.w += this.speedX;
											this.h += this.speedY;
											if (this.w < 0 || this.w > cw) {
													this.speedX *= -1;
											}
											if (this.h < 0 || this.h > ch) {
													this.speedY *= -1;
											}
											this.draw();
									},
									shine: function() {
											this.r = rand(0.5, 1);
											this.draw();
									}
							}
	
							//生成点对象
							function createDots(num) {
									if (num) {
											for (var i = num; i > 0; i--) {
													var dots = new Dot();
													dots.init();
													dots.draw();
													dotsArr.push(dots);
											}
									}
							}
	
							function Line() {};
							Line.prototype = {
									//星星之间的连线
									initStarLine: function() {
											this.colorStar = '#6699cc';
											this.colorStop = '#9966cc';
									},
									//鼠标与星星之间的连线
									initNewLine: function() {
											this.colorStar = '#6699cc';
											this.colorStop = '#ff6666';
									},
									drawLine: function(ow, oh, nw, nh) {
											var dx = ow - nw;
											var dy = oh - nh;
											var d = Math.sqrt(dx * dx + dy * dy);
											if (d < 60) {
													var line = context.createLinearGradient(ow, oh, nw, nh);
													context.beginPath();
													context.moveTo(ow, oh); //线开始点,
													context.lineTo(nw, nh); //线结束点
													line.addColorStop(0, this.colorStar);
													line.addColorStop(1, this.colorStop);
													context.StrokeWidth = 1;
													context.strokeStyle = line;
													context.stroke();
													context.restore();
											}
									}
							}
	
							function rand(min, max) {
									return (Math.random() * (max - min)) + min;
							}
	
							createDots(400);
	
							// setTimeout(function(){    //递归调用setTimeout
							//     content.clearRect(0,0,cw,ch);
							//     for(var i of dotsArr){
							//         i.move();
							//         // for(var j=0;j<stars.length/2;j++ ){
							//         //     var line = new Line();
							//         //     line.initStarLine();
							//         //     line.drawLine(i.w,i.h,stars[j].w,stars[j].h);
							//         // }
							//     }
							//     setTimeout(arguments.callee,1000/5);
							// },1000/60);
	
							setInterval(function() {
									content.clearRect(0, 0, cw, ch);
									for (var i of dotsArr) {
											// i.move();
											i.shine();
									}
							}, 1000 / 5)
					}
			}
	})(window)
	</script>

</body>
</html>
